import { Component } from 'react';
import './Sgxk.less';
import Tabs  from 'uxcore-tabs';
import Table from 'uxcore-table';
import EmptyData from 'uxcore-empty-data';
import Matrix from 'uxcore-matrix';
import { URLS } from './../../app/variables';
import Message from 'uxcore-message';

export default class Sgxk extends Component {


  constructor(props) {
    super(props);
    this.state = {
      wdHeight: 120,
      fileWait: true
    }
    this.customRender = this.customRender.bind(this);
    this.tabChange = this.tabChange.bind(this);
    this.hideWait = this.hideWait.bind(this);
    this.onFileLoad = this.onFileLoad.bind(this);
  }

  customRender(cellData) {
    const style = {
      lineHeight: '50px',
      textAlign: 'left',
      padding: '0 20px',
      overflow: 'hidden',
    };
    if (cellData.type === 'title') {
      if (cellData.row === 2) {
        style.lineHeight = '100px';
      }
      style.textAlign = 'right';
      style.color = 'rgba(0, 0, 0, 0.8)';
      style.fontWeight = 'bold';
      style.background = 'rgba(31,56,88,0.04)';
    }

    let content = cellData.text;
    if (cellData.type === 'link') {
      content = <a>{content}</a>;
    }
    return (
      <div style={style}>
        {content}
      </div>
    );
  }

  tabChange(obj) {

    if (this.props.data.docUrl && (obj === '4' & this.state.fileWait)) {
      this.setState({
        wdHeight: 725
      });
      Message['loading']('请等待...', 35);
    } else {
      this.hideWait();
    }
  }

  onFileLoad() {
    this.setState({fileWait: false});
    this.hideWait();
  }

  hideWait() {
    Message['clear']('clear', 5);
  }

  render() {


    const jdata = {
      data: [
        {x: 0, y: 0, row: 1, col: 1, type: 'title', text: '施工许可证号'},
        {x: 1, y: 0, row: 1, col: 3, type: 'normal', text: this.props.data.sgxkzh},
        {x: 0, y: 1, row: 1, col: 1, type: 'title', text: '工程名称'},
        {x: 1, y: 1, row: 1, col: 3, type: 'normal', text: this.props.data.name},
      ]
    };

    const ghxkProps = {
      size: 'small',
      showColumnPicker: false,
      showPager: false,
      jsxdata: {
        "data": this.props.ghxk,
      },
      jsxcolumns: [
        {dataKey: 'babh', title: '许可证号', width: 155, ordered: false},
        {dataKey: 'coding', title: '微机号', width: 155, ordered: false},
        {dataKey: 'gcxz', title: '工程性质', width: 100, ordered: false},
        {dataKey: 'jhpw', title: '计划批文', width: 195, ordered: false},
        {dataKey: 'tzze', title: '工程投资', width: 175, ordered: false},
        {dataKey: 'jsgm', title: '建设规模', width: 195, ordered: false},
      ],
    }

    const sgxmbProps = {
      size: 'small',
      showColumnPicker: false,
      showPager: false,
      jsxdata: {
        "data": this.props.sgxmb,
      },
      jsxcolumns: [
        {dataKey: 'jobName', title: '岗位', width: 195, ordered: false},
        {dataKey: 'name', title: '姓名', width: 155, ordered: false},
        {dataKey: 'zsNum', title: '证书', width: 195, ordered: false},
        {dataKey: 'beginTime', title: '加入时间', width: 195, ordered: false},
        {dataKey: 'isPost', title: '是否在岗', width: 100, ordered: false},
      ],
    }
    const jljgProps = {
      size: 'small',
      showColumnPicker: false,
      showPager: false,
      jsxdata: {
        "data": this.props.jljg,
      },
      jsxcolumns: [
        {dataKey: 'jobName', title: '岗位', width: 195, ordered: false},
        {dataKey: 'name', title: '姓名', width: 155, ordered: false},
        {dataKey: 'zsNum', title: '证书', width: 195, ordered: false},
        {dataKey: 'beginTime', title: '加入时间', width: 195, ordered: false},
        {dataKey: 'isPost', title: '是否在岗', width: 100, ordered: false},
      ],
    }

    const url = URLS.cmisServer + encodeURIComponent(this.props.data.docUrl);

    return (
      <div className="mod-sgxk">

        <Tabs defaultActiveKey="0" type="small" onChange={this.tabChange}>
          <Tabs.TabPane tab="基本信息" key="0">
            <div className="col_1 sgxk-table-div" style={{height:525}}>
              <Matrix
                data={jdata}
                cellWidth={[130,345,130,345]}
                render={this.customRender}
              />
            </div>
          </Tabs.TabPane>
          <Tabs.TabPane tab="规划许可" key="1">
            <div className="col_1 sgxk-table-div" style={{height:525}}>
              <Table {...ghxkProps} ref="ghxkgrid"/>
            </div>
          </Tabs.TabPane>
          <Tabs.TabPane tab="项目管理部" key="2">
            <div className="col_1 sgxk-table-div" style={{height:525}}>
              <Table {...sgxmbProps} ref="sgxmbgrid"/>
            </div>
          </Tabs.TabPane>
          <Tabs.TabPane tab="项目监理机构" key="3">
            <div className="col_1 sgxk-table-div" style={{height:525}}>
              <Table {...jljgProps} ref="jljggrid"/>
            </div>
          </Tabs.TabPane>
          <Tabs.TabPane tab="文档" key="4">
            <div className="col_1  sgxk-table-div" style={{height:this.state.wdHeight}}>
              { this.props.data.docUrl ?
                <iframe onLoad={this.onFileLoad}
                        src={ URLS.sgxkzs +  '?docId='+this.props.data.docUrl } height="720"
                        width="1000"
                        frameborder="0"/> :
                <EmptyData/>}
            </div>
          </Tabs.TabPane>
        </Tabs>
      </div>
    );
  }
}
